.wrapper {
  display: flex;
  justify-content: center;
  height: 100%;
}

.scene {
  width: 300px;
  height: 300px;
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  top: 40px;
  left: 100px;
  transform-style: preserve-3d;
  transform-origin: 50px 100px;
}

.face {
  position: absolute;
  border: 1px solid #b58df1;
  background-color: #782aeb;
}
.front {
  width: 100px;
  height: 200px;
  transform: rotateY(0deg) translateZ(5px);
  background-image: url('/img/phone_texture.png');
  background-size: 98px 198px;
}
.back {
  width: 100px;
  height: 200px;
  transform: rotateY(180deg) translateZ(5px);
}
.right {
  width: 12px;
  height: 200px;
  transform: rotateY(90deg) translateZ(94px);
}
.left {
  width: 12px;
  height: 200px;
  transform: rotateY(-90deg) translateZ(6px);
}
.top {
  width: 100px;
  height: 12px;
  transform: rotateX(90deg) translateZ(5px);
}
.bottom {
  width: 100px;
  height: 12px;
  transform: rotateX(-90deg) translateZ(194px);
}
